import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './TopNavigation.stories';

<Meta of={Stories} />

# TopNavigation

<Status variant="stable" />

The top navigation is part of the [application shell](https://developers.google.com/web/fundamentals/architecture/app-shell). It contains the branding, page links, and the user profile menu.

<Story of={Stories.Base} />
<Props />

## Usage with the side navigation

<Story of={Stories.WithSideNavigation} inline={false} />

When used alongside the [SideNavigation](Navigation/SideNavigation) component, the top navigation displays a hamburger button on narrow viewports which can be used to toggle the side navigation.

## Accessibility

To improve the navigation experience, this component includes a skip navigation link that allows users to jump directly to the main content of the page. This is particularly useful for users who rely on screen readers or keyboard navigation.
To enable this behaviour, pass a hash link to your main content as the `skipNavigationHref` prop and a `skipNavigationLabel` as label.
More information about this can be found in the [SkipLink](Navigation/SkipLink/Docs) component documentation.
